<template>
  <div>
    <img
      src="../assets/letter.svg"
      :class="{
        animate__fadeOutUp: !isLetterShow,
        'animate__pulse animate__infinite': isLetterShow,
      }"
      class="animate__animated letter"
      @click="clickEmail"
    />
    <!-- 背景音乐 -->
    <audio preload="auto" ref="audio" loop>
      <source src="../assets/music.mp3" type="audio/mp3" />
    </audio>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isLetterShow: true,
    };
  },
  methods: {
    clickEmail() {
      this.$refs.audio.play();
      this.isLetterShow = false;
    },
  },
};
</script>

<style scoped>
.letter {
  position: fixed;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 200px;
}
</style>